<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>登录-史上最简单的SpringSecurity教程</title>
    <link type="text/css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}" href="../static/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" th:href="@{/css/font-awesome.min.css}" href="../static/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" th:href="@{/css/login.css}" href="../static/css/login.css">
    <script type="text/javascript" th:inline="javascript">
            //延时二维码登录页面的二维码加载图片
            /*$("#qrc-img").on("load",function(){
                var t = $(this);
                if(t.is(":hidden")){
                    return false;
                }
            });*/
    </script>
</head>
<body>
    <div class="text-center">
        <div class="container">
            <div class="login-content">
                <div class="login-logo">
                    <h1>统一认证授权中心</h1>
                </div>
                <div class="login-form">
                    <div class="nav">
                        <a class="login on">普通登陆</a>
                        <a class="login">手机登陆</a>
                        <a class="login">二维码</a>
                    </div>
                    <div class="tab1 tab-pane active">
                        <form th:action="@{/password-login}" method="post" th:method="post" class="mt-1" onsubmit="return false;">
                            <div class="form-group">
                                <input type="text" class="form-control" name="username" placeholder="用户名"/>
                            </div>
                            <div class="form-group">
                                <input type="password" class="form-control" name="password" placeholder="密码"/>
                            </div>
                            <div class="form-group clearfix">
                                <input type="text" class="form-control code" name="code" placeholder="验证码"/>
                                <img th:src="@{/commons/code}" id="pass_code" onclick="refresh();" alt="验证码"/>
                            </div>
                            <div class="checkbox">
                                <label><input type="checkbox" name="remember-me"/> 记住我</label>
                            </div>
                            <button type="submit" class="btn btn-primary btn-block mb-1 mt-1 login-bnt" onclick="login_pass()">登录</button>
                            <p class="text-muted text-center"> <a href="login.html#">
                                <small>忘记密码了？</small></a> | <a href="#">注册一个新账号</a>
                            </p>
                        </form>
                    </div>
                    <div class="tab2 tab-pane">
                        <form th:action="@{/phone-login}" method="post" th:method="post" class="mt-1" onsubmit="return false;">
                            <div class="form-group">
                                <input type="text" class="form-control" name="phone" placeholder="手机号"/>
                            </div>
                            <div class="form-group clearfix">
                                <input type="text" class="form-control code" name="code" placeholder="验证码"/>
                                <img th:src="@{/commons/code}" id="phone_code" onclick="refresh();" alt="验证码"/>
                            </div>
                            <button type="submit" class="btn btn-primary btn-block mb-1 mt-1 login-bnt" onclick="login_phone()">登录</button>
                            <p class="text-muted text-center"> <a href="login.html#">
                                <small>忘记密码了？</small></a> | <a href="#">注册一个新账号</a>
                            </p>
                        </form>
                    </div>
                    <div class="tab3 tab-pane">
                        <form th:action="@{/qcr-login}" method="post" th:method="post" class="mt-1" onsubmit="return false;">

                            <div class="form-group">
                                <img id="qrc-img" th:src="@{/commons/QRCimg}" alt="二维码" />
                            </div>
                            <input type="text" id="uuid" value="13414485481" placeholder="UUID"/>
                            <input type="text" id="phone" value="13414485481" placeholder="电话号码"/>
                            <p class="text-muted text-center"> <a href="login.html#">
                                <small>忘记密码了？</small></a> | <a href="#">注册一个新账号</a>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" th:src="@{/js/jquery-2.1.4.min.js}" src="../static/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}" src="../static/js/bootstrap.min.js"></script>
<!-- “点击验证码图片，自动刷新” 脚本 -->
<script type="text/javascript" th:inline="javascript">

    $(function(){
      
    });

    var i = 0;
    //用于检查二维码是否被扫描
    var timer = setInterval(function (){

        var uuid = $("#uuid").val();
        var phone = $("#phone").val();
        var url = "/QRCLogin/"+uuid+"/"+phone;
        if(null == uuid || null == phone){
            return;
        }
        $.ajax({
            async: false,
            type: "POST",
            dataType: "json",
            url: url,
            contentType: "application/json",
            success: function (result) {
                console.log(result)
                /*if (result.code === 200) {
                    alert("登陆成功");
                    window.location.href = "/index.html";
                } else {
                    alert(result.message)
                }*/
            }
        });
        i++
        console.info(i);
        if(i>=10){
           clearInterval(timer);
        }
    },3000)

    $(".nav a").off("click").on("click",function(){
        var index = $(this).index();
        $(this).addClass("on").siblings().removeClass("on");
        $(".login-form .tab-pane").eq(index).addClass("active").siblings().removeClass("active");
    });

    function refresh() {
        document.getElementById("code").src =
            "/commons/code?time" + new Date().getTime();
    }


    function login_pass(){
        $.ajax({
            async: false,
            type: "POST",
            dataType: "json",
            url: '/password-login',
            contentType: "application/json",
            data: JSON.stringify({
                "username": $(".tab1 input[name='username']").val(),
                "password": $(".tab1 input[name='password']").val(),
                "code": $(".tab1 input[name='code']").val(),
                "remember-me": $(".tab1 input[name='rememberMe']").val()
            }),
            success: function (result) {
                console.log(result)
                if (result.code === 200) {
                    alert("登陆成功");
                    window.location.href = "/index.html";
                } else {
                    alert(result.message)
                }
            }
        });
    }

    function login_phone(){
        $.ajax({
            async: false,
            type: "POST",
            dataType: "json",
            url: '/phone-login',
            contentType: "application/json",
            data: JSON.stringify({
                "phone": $(".tab2 input[name='phone']").val(),
                "code": $(".tab2 input[name='code']").val()
            }),
            success: function (result) {
                console.log(result)
                if (result.code === 200) {
                    alert("登陆成功");
                    window.location.href = "/index.html";
                } else {
                    alert(result.message)
                }
            }
        });
    }
</script>
</html>